<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pagination.currentPage"
    :page-sizes="[1, 5, 20, 40]"
    :page-size="pagination.pageSize"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total"
    class="page "
  >
  </el-pagination>
</template>

<script>
import { getSubjectList } from "@/api/getSubjectList.js";
export default {
  data() {
    return {
      pagination: {
        total: 1,
        pageSize: 1,
        currentPage: 1,
      },
    };
  },
  methods: {
    getData() {
      let data = {
        limit: this.pagination.pageSize,
        page: this.pagination.currentPage,
      };
      getSubjectList(data).then((res) => {
        console.log(this.$parent);

        const dd = res.data.data.items;
        this.$parent.list = dd;

        this.pagination.total = res.data.data.pagination.total;
      });
    },
    //页容量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
      this.getData();
    },
    //当前页改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.currentPage = val;
      this.getData();
    },
  },
};
</script>

<style lang="less">
.page {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
</style>
